<template>
  <div class="container" id="app">
    <header-nav class="header"/>
    <div class="row"> 
      <div class="in-text col-md-5 col-sm-5">
        <div>
          <button class="btn" v-show="isShow">中文</button>
          <button class="btn" v-show="!isShow">蒙文</button>
          <!-- 切换按钮 -->
          <span class="t-img" @click="t_click">
            <img src="~assets/img/t.png" alt="">
          </span>
          <button class="btn" v-show="isShow">蒙文</button>
          <button class="btn" v-show="!isShow">中文</button>
        </div>
        <div>
          <!-- 中文输入框 -->
          <textarea
            class="form-control text"
            v-model="text"
            v-show="isShow"
            placeholder="请输入您要翻译的句子...">
         </textarea>
         <!-- 蒙文输入框 --> 
         <div 
            id="in_mongo"
            class="form-control in_mongo" 
            v-show="!isShow" 
            contenteditable="true">
         </div>
        </div>
      </div>
      <!-- 翻译按钮（蒙） -->
      <div class="btn-div col-md-2 col-sm-2" v-show="isShow">
        <button class="btn btn-trans" @click="TransMo">
          <img src="~assets/img/trans_m.png" alt="">
        </button>
      </div> 
      <!-- 翻译按钮（汉） -->
      <div class="btn-div col-md-2 col-sm-2" v-show="!isShow">
        <button class="btn btn-trans" @click="TransZh">
          <img src="~assets/img/trans_zh.png" alt="">
        </button>
      </div> 
      <!-- 译文框 -->
      <div class="tgt-div col-md-5 col-sm-5">
        <div class="tgtText col-md-12" v-show="isShow">
          <p v-html="tgt_text"></p>
        </div>
        <div class="zh_text col-md-12" v-show="!isShow">
          <p v-html="tgt_text"></p>
        </div>
      </div>   
    </div>
    <footer-nav class="footer"/>
  </div>
</template>


<script >
  import Qs from 'qs'
  import axios from 'axios';
  import HeaderNav from 'components/common/Header';
  import FooterNav from 'components/common/Footer';
  import md5 from 'js-md5'

  export default {
    name: 'Trans',
    components: { 
      HeaderNav,
      FooterNav,
    },
    data() {
      return {
        text: '',
        tgt_text: '',
        textBorder: false,
        isShow: true
      }
    },
    methods: {
      t_click() {
        this.isShow = !this.isShow
        let mongo_text = document.getElementById('in_mongo')
        mongo_text.textContent = ''
        this.text = ''
        this.tgt_text = ''
      },
      // 中文 --> 蒙文
      TransMo(licensekey, secretkey) {
        // axios 中 .then() 不能识别 this 
        const self = this

        let timestamp = Math.round(new Date().getTime()/1000)
        let content = licensekey + timestamp + secretkey
        let hash = md5(content)


        // var params = {text: self.text}
        // axios.post (
        //   'http://ai2.dayaar.com.cn/dapi/api/v1/mt2', 
        //   { 
        //     data: { text: self.text }, 
        //     headers: {
        //       'dapi-lang': 'chs-mon',
        //       'dapi-licensekey': 'b5524aee-791c-43b3-a8f2-9ff77e911b0d',
        //       'dapi-timestamp': timestamp,
        //       'dapi-secretkey': '05a26b86-a19d-4727-a8bb-d29a9fa6eb01',
        //       'Content-Type': 'application/octet-stream',
        //       'dapi-checksum': hash,
        //     },
        // })

        axios({
          method: 'post',
          url: 'http://ai2.dayaar.com.cn/dapi/api/v1/mt2',
          // data: Qs.stringify(params),
          headers: {
            'dapi-lang': 'chs-mon',
            // 'dapi-licensekey': 'b5524aee-791c-43b3-a8f2-9ff77e911b0d',
            // 'dapi-timestamp': timestamp,
            // 'dapi-secretkey': '05a26b86-a19d-4727-a8bb-d29a9fa6eb01',
            // 'Content-Type': 'application/octet-stream',
            // 'dapi-checksum': hash,
          }
        })
        .then(res => {
          // self.tgt_text = res.data.tgt_text
          console.log(res.data);
          // console.log(res.data.tgt_text);
        })
        .catch(err => {
          console.log('error')
          console.log(err);
        })
      },
      // 蒙文 --> 中文
      TransZh() {
        let mongo_text = document.getElementById('in_mongo').textContent
        console.log(mongo_text);
        this.text = mongo_text
        // axios 中 .then() 不能识别 this 
        const self = this
        axios.get(
          'http://api.niutrans.com/NiuTransServer/translation',
          {
            params: {
              'from': 'mo',
              'to': 'zh',
              'apikey': 'b90f70d08fdddb8951da3b2b0008a970',
              'src_text': this.text
            }
          }
        )
        .then(res => {
          self.tgt_text = res.data.tgt_text
          console.log(res.data.tgt_text);
        })
        .catch(err => {
          console.log(err);
        })
      }
    }
  }
</script>

<style scoped>
  .header {
    padding-bottom: 0;
  }
  .footer {
    padding-top: 50px;
  } 
</style>
  


